<template>
  <a-card :bordered='false'>
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        size='mini'
        :border='false'
        :resizable='true'
        :showOverflow='true'
        :loading='loading'
        :height='pageHeight-94'
        :align='left'
        :columns='columns'
        :data='dataSource'
        :treeConfig='treeConfig'
        :toolbar-config="tableToolbar"
        @radio-change='radioChangeEvent'
        :radio-config="{ trigger: 'row'}"
      >
        <template #toolbar_buttons>
          <div class='table-operator'>
            <a-button @click='handleAdd' type='primary'>新增</a-button>
            <a-button @click='handleAddPhone' type='primary'>新增手机菜单</a-button>
          </div>
        </template>

        <template #menuType='{ row }'>
          {{ row.menuType == 2 ? '按钮/权限' : '菜单' }}
        </template>

        <template #funType='{ row }'>
          {{ row.funType == 1 ? '手机菜单' : 'PC菜单' }}
        </template>
        <template #action='{ row:record }'>
          <a @click='handleEdit(record)'>编辑</a>
          <a-divider type='vertical' />
          <a-dropdown>
            <a class='ant-dropdown-link'>
              更多
              <i data-v-a73a423a='' aria-label='图标: down' class='anticon anticon-down'>
              <svg viewBox='64 64 896 896' data-icon='down' width='1em' height='1em' fill='currentColor'
                   aria-hidden='true' focusable='false' class=''>
                <path
                  d='M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z'></path>
              </svg>
            </i>
            </a>
            <a-menu slot='overlay'>
              <a-menu-item>
                <a href='javascript:;' @click='handleDetail(record)'>详情</a>
              </a-menu-item>
              <a-menu-item>
                <a href='javascript:;' @click='handleAddSub(record)'>添加下级</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-has="'business:log'">
                <a  href='javascript:;' @click='handleBusiness("菜单管理",row)'>日志</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->

    <permission-modal ref='modalForm' @ok='modalFormOk'></permission-modal>
    <permission-data-rule-list ref='PermissionDataRuleList' @ok='modalFormOk'></permission-data-rule-list>
    <permission-modal-ph ref='modalFormPh' @ok='modalFormOkPh'></permission-modal-ph>
    <permiss-object ref='permissForm' @ok='permissFormOk'></permiss-object>
    <business-log ref='businessLog'></business-log>
  </a-card>
</template>

<script>
import permissObject from '@page-modules/permissObject'
import PermissionModal from '@page-modules/PermissionModal'
import PermissionModalPh from '@page-modules/PermissionModalPh'
import { getPermissionList } from '@api/api'
import { PageListMixin } from '@/mixins/PageListMixin'
import PermissionDataRuleList from '../PermissionDataRuleList'
import JEllipsis from '@comp/cn-form/JEllipsis'

const columns = [
  { type: 'radio', width: 60, fixed: 'left' },

  {
    title: '菜单名称',
    field: 'name',
    minWidth: 150,
    treeNode: true
  }, {
    title: '菜单类型',
    minWidth: 150,
    slots: { default: 'menuType' }
  }, {
    title: '平台类型',
    field: 'funType',
    minWidth: 150,
    slots: { default: 'funType' }
  },
  {
    title: 'icon',
    field: 'icon',
    minWidth: 150
  },
  {
    title: '组件',
    field: 'component',
    minWidth: 150
  },
  {
    title: '路径',
    field: 'path',
    minWidth: 150
  },
  {
    title: '排序',
    field: 'sort',
    minWidth: 150
  },
  {
    title: '创建人',
    field: 'createName',
    minWidth: 80,
  },
  {
    title: '创建时间',
    field: 'createTime',
    minWidth: 80,
  },
  {
    title: '更新人',
    field: 'updateName',
    minWidth: 80,
  },
  {
    title: '更新时间',
    field: 'updateTime',
    minWidth: 80,
  },
  {
    title: '操作',
    field: 'action',
    fixed: 'right',
    slots: { default: 'action' },
    width: 120
  }
]

export default {
  name: 'PermissionList',
  mixins: [PageListMixin],
  components: {
    PermissionDataRuleList,
    PermissionModal,
    PermissionModalPh,
    JEllipsis,
    permissObject
  },
  data() {
    return {

      description: '菜单管理',
      treeConfig: {
        rowField: 'orgCode',
        parentField: 'parentCode'
      },
      // 表头
      columns: columns,
      loading: false,
      // 展开的行，受控属性
      expandedRowKeys: [],
      url: {
        delete: '/cnFunctionController/deleteByid',
        deleteBatch: '/sys/permission/deleteBatch'
      }
    }
  },
  methods: {
    permissFormOk() {
      this.loadData()
    },
    handleAddpermiss(cord) {
      this.$refs.permissForm.edit(cord)
    },
    loadData() {
      this.dataSource = []
      getPermissionList().then((res) => {
        if (res.success) {
          console.log(res.result)
          this.dataSource = res.result
        }
      })
    },
    // 打开数据规则编辑
    handleDataRule(record) {
      this.$refs.PermissionDataRuleList.edit(record)
    },
    handleAddSub(record) {
      if (record.funType == 0) {
        this.$refs.modalForm.title = '添加子菜单'
        this.$refs.modalForm.localMenuType = 1
        this.$refs.modalForm.disableSubmit = false
        this.$refs.modalForm.edit({ status: '1', menuType: '1', route: true, parentCode: record.functionCode })
      } else {
        this.$refs.modalFormPh.title = '添加子菜单'
        this.$refs.modalFormPh.localMenuType = 1
        this.$refs.modalFormPh.disableSubmit = false
        this.$refs.modalFormPh.edit({ status: '1', permsType: '1', route: true, 'parentId': record.id })
      }

    },
    handleExpandedRowsChange(expandedRows) {
      this.expandedRowKeys = expandedRows
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
